<template>
  <div class="japan">
    <div class="loading" v-if="isloading">
      正在加载中...
    </div>
    <div class="japan_tit">
      <div class="tit_l">
        <span @click="change(2)" :class="type == 2 ? 'blue' : ''">综合</span>
        <span @click="change(1)" :class="type == 1 ? 'blue' : ''">最新</span>
        <span @click="change(3)" :class="type == 3 ? 'blue' : ''">最热</span>
      </div>
      <div class="tit_r">
        <span @click="changeShow"
          ><span ref="all">全部</span
          ><i :class="!ishow ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i
        ></span>
      </div>
      <div class="fixed" v-if="ishow">
        <span @click="changeLevel(0)" :class="level == '0' ? 'blue' : ''"
          >全部</span
        >
        <span @click="changeLevel(1)" :class="level == '1' ? 'blue' : ''"
          >入门</span
        >
        <span
          @click="changeLevel(2, 3, 4, 5)"
          :class="level == '2,3,4,5' ? 'blue' : ''"
          >提升</span
        >
      </div>
    </div>
    <div class="japan_content" @scroll="srcollChange">
      <div class="content_item" v-for="item in japanlist" :key="item.id">
        <div class="item_l">
          <img :src="'https://ss.lanqb.com/' + item.posters.mobile" />
        </div>
        <div class="item_r">
          <h3>{{ item.title }}</h3>
          <div class="r_mid">
            <img :src="'https://ss.lanqb.com/' + item.profile.avatar" alt="" />
            <span>{{ item.profile.nickname }}</span>
            <span>共{{ item.preview_setting.lessons_count }}节</span>
          </div>
          <div class="r_bot">{{ item.study_num }}人在学</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JaPan',

  data() {
     return {
      ishow:false,
      japanlist: [],
      isblue:true,
      type:2,
      level:[],
      page:1,
      isloading:false,
    };
  },

  mounted() {
   
  },
  created() {
    fetch("https://m.lanqb.com/api/course/video?course_fields_ids=6&type=2&limit=8&page=1").then(res=>res.json()).then(res=>{
      console.log(res.data);
      this.japanlist=res.data
    })
  },

  methods:{
     srcollChange(e){
      // console.log("滚动了");
      if(e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight){
        this.isloading=true;
        console.log("到底了");
        this.page++;
        fetch(`https://m.lanqb.com/api/course/video?course_fields_ids=6&type=${this.type}&limit=8&page=${this.page}`).then(res=>res.json()).then(res=>{
          this.japanlist=[...this.japanlist,...res.data]
          this.isloading=false;
          if(!res.data){
            alert("没有数据了")
          }
        })
      }
    },
    change(type){
      this.type=type;
      console.log(type);
      let url="";
       this.isloading=true;
      this.level.length!==0?url=`https://m.lanqb.com/api/course/video?course_fields_ids=6&type=${this.type}&limit=8&page=1&level=${this.level}`:url=`https://m.lanqb.com/api/course/video?course_fields_ids=6&type=${this.type}&limit=8&page=1`;
      fetch(url).then(res=>res.json()).then(res=>{
      console.log(res.data);
      this.japanlist=res.data
       this.isloading=false;
    })
    },
    changeLevel(...level){
      
       this.ishow=false;
      this.level=level.join(",")
      if(level=="0"){
        this.$refs.all.innerHTML="全部";
         this.isloading=true;
           fetch("https://m.lanqb.com/api/course/video?course_fields_ids=6&type=2&limit=8&page=1").then(res=>res.json()).then(res=>{
      console.log(res.data);
      this.japanlist=res.data
       this.isloading=false;
    })
   }else{
     this.ishow=true;
    this.level=level.join(",")
      console.log(this.level);
      if (this.level=="1") {
        this.$refs.all.innerHTML="入门";6
      }else{
        this.$refs.all.innerHTML="提升";
      }
      
        fetch(`https://m.lanqb.com/api/course/video?course_fields_ids=6&type=2&level=${this.level}&limit=8&page=1`).then(res=>res.json()).then(res=>{
      console.log(res.data);
      this.japanlist=res.data
       this.ishow=false;
    })
   }

    },
    changeShow(){
      this.ishow=!this.ishow;
    }
  },
};
</script>

<style lang="scss" scoped></style>
